<div style="text-align: center;padding-top: 20px">
  <button nz-button [nzType]="'primary'" (click)="selectDataPath($event)">
    <i class="anticon anticon-folder-open"></i>
    <span>初始化数据</span>
  </button>
  <nz-select style="width: 300px;" [(ngModel)]="selectedOption" [nzPlaceHolder]="'选择奖项'" nzAllowClear
             [disabled]="isDoing">
    <nz-option
      *ngFor="let option of options"
      [nzLabel]="option"
      [nzValue]="option"
      [nzDisabled]="option.disabled">
    </nz-option>
  </nz-select>
  <button nz-button [nzType]="'primary'" (click)="doIt($event);" [nzLoading]="isDoing"
          [disabled]="!selectedOption||!hasEmployees()">
    <i class="anticon anticon-caret-right"></i>
    <span>开始</span>
  </button>
  <button nz-button [nzType]="'primary'" (click)="isShowResModal=true;">
    <i class="anticon anticon-trophy"></i>
    <span>结果公示</span>
  </button>

</div>
<div style="text-align: center;padding-top: 20px">
  <span>{{currStatus}}</span>
  <button *ngIf="canStop" style="width: 100px;height: 50px;font-size: 18px;" nz-button [nzType]="'primary'"
          [nzSize]="'large'" (click)="stopIt($event)"

          [nzLoading]="isStopping">
    <i class="anticon anticon-check-circle"></i>
    <span>停止</span>
  </button>
</div>
<div class="container">
  <ng-template appContainer></ng-template>
</div>
<nz-modal [nzWidth]="600" [nzStyle]="style" [nzVisible]="isShowModal" [nzTitle]="modalTitle" [nzContent]="modalContent"
          [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)" [nzClosable]="false" [nzMaskClosable]="false">
  <ng-template #modalTitle>
    <span style="color: #fa0000;font-weight: bold;font-size: 20px"><i class="anticon anticon-smile-o"></i>恭喜抽中 【 {{selectedOption}} 】</span>
  </ng-template>
  <ng-template #modalContent>
    <div style="font-size: 40px;text-align: center">
      <!--<div class="enjoy-css" style="display: inline-block;width: 100px">{{ employeeRand &&-->
        <!--employeeRand[getIndex() ]?employeeRand[getIndex() ][0]:"" }}-->
      <!--</div>-->
      <div class="enjoy-css" style="display: inline-block;width: 300px">{{ employeeRand &&
        employeeRand[getIndex() ]?employeeRand[getIndex() ][1]:"" }}
      </div>
    </div>

  </ng-template>
  <ng-template #modalFooter>
    <nz-popconfirm [nzTitle]="'确定重新开始吗？'" [nzOkText]="'确定'" [nzCancelText]="'不'" [nzPlacement]="'bottomLeft'"
                   (nzOnConfirm)="handleCancel()">
      <button nz-popconfirm *ngIf="!isDoing" nz-button [nzType]="'default'" [nzSize]="'large'">
        重新抽奖
      </button>
    </nz-popconfirm>

    <button *ngIf="!isDoing" nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="handleOk($event)">
      确认
    </button>

  </ng-template>
</nz-modal>
<nz-modal [nzWidth]="600" [nzStyle]="style" [nzVisible]="isShowResModal" [nzTitle]="modalTitleRes"
          [nzContent]="modalContentRes" [nzFooter]="modalFooterRes"
          (nzOnCancel)="isShowResModal=false" style="">
  <ng-template #modalTitleRes>
    <div style="color: #ff1600">结果公示</div>
  </ng-template>
  <ng-template #modalContentRes>
    <h1 style="text-align: center;font-weight: bold;color: #ff0e00">恭喜</h1>
    <div style="font-size: 20px;text-align: center;font-weight: bold;color: #ff4e4e">
      <div *ngFor="let res of results ; index as i; first as isFirst">
        {{ results[results.length-1-i] }}
      </div>
    </div>

  </ng-template>
  <ng-template #modalFooterRes>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="isShowResModal=false">
      <span>关闭</span>
    </button>
  </ng-template>
</nz-modal>

